<!--
 * @Author: hifishroom
 * @Date: 2021-08-24 14:41:03
 * @LastEditTime: 2021-09-07 12:16:54
 * @FilePath: \backstage\src\components\content\reposeGrid\GridBox.vue
-->
<template>
  <div class="GridBox flex">
    <div
      v-for="(item, index) in list"
      :key="index"
      @click="getID(item.id)"
      class="Grid-modle"
    >
      <grid-item>
        <div class="grid-pad">
          <img :src="item.icon" alt="" class="grid-img" />
        </div>
        <div class="grid-text" v-if="title == '座落'">
          <div class="using ">
            {{ title }}名称<em class="mr">:</em
            ><span class="grid-color">{{ item.name }}</span>
          </div>
          <div class="using ">
            {{ title }}环境<em class="mr">:</em
            ><span class="grid-color">{{ item.environment_name }}</span>
          </div>
          <div class="using ">
            {{ title }}位置<em class="mr">:</em
            ><span class="grid-color">{{ item.cityName }}</span>
          </div>
          <div class="using ">
            {{ title }}面积<em class="mr">:</em
            ><span class="grid-color">{{ item.area }}</span>
          </div>
          <div class="using ">
            {{ title }}所属单位<em class="mr">:</em
            ><span class="grid-color">{{ item.dw }}</span>
          </div>
        </div>
        <div class="grid-text" v-else-if="title == '酒店'">
          <div class="using ">
            {{ title }}名称<em class="mr">:</em
            ><span class="grid-color">{{ item.hotelName }}</span>
          </div>
          <div class="using ">
            {{ title }}环境<em class="mr">:</em
            ><span class="grid-color">{{ item.hj }}</span>
          </div>
          <div class="using ">
            {{ title }}位置<em class="mr">:</em
            ><span class="grid-color">{{ item.cityName }}</span>
          </div>
          <div class="using ">
            {{ title }}面积<em class="mr">:</em
            ><span class="grid-color">{{ item.mj }}</span>
          </div>
          <div class="using ">
            {{ title }}所属单位<em class="mr">:</em
            ><span class="grid-color">{{ item.dw }}</span>
          </div>
        </div>
        <div class="grid-text" v-else-if="title == '靶场'">
          <div class="using ">
            {{ title }}名称<em class="mr">:</em
            ><span class="grid-color">{{ item.rangeName }}</span>
          </div>
          <div class="using ">
            {{ title }}环境<em class="mr">:</em
            ><span class="grid-color">{{ item.hj }}</span>
          </div>
          <div class="using ">
            {{ title }}位置<em class="mr">:</em
            ><span class="grid-color">{{ item.cityName }}</span>
          </div>
          <div class="using ">
            {{ title }}面积<em class="mr">:</em
            ><span class="grid-color">{{ item.mj }}</span>
          </div>
          <div class="using ">
            {{ title }}所属单位<em class="mr">:</em
            ><span class="grid-color">{{ item.dw }}</span>
          </div>
        </div>
        <div class="grid-text" v-else-if="title == '养殖场'">
          <div class="using ">
            {{ title }}名称<em class="mr">:</em
            ><span class="grid-color">{{ item.farmName }}</span>
          </div>
          <div class="using ">
            {{ title }}环境<em class="mr">:</em
            ><span class="grid-color">{{ item.hj }}</span>
          </div>
          <div class="using ">
            {{ title }}位置<em class="mr">:</em
            ><span class="grid-color">{{ item.cityName }}</span>
          </div>
          <div class="using ">
            {{ title }}面积<em class="mr">:</em
            ><span class="grid-color">{{ item.mj }}</span>
          </div>
          <div class="using ">
            {{ title }}所属单位<em class="mr">:</em
            ><span class="grid-color">{{ item.dw }}</span>
          </div>
        </div>
        <div class="grid-text" v-else-if="title == '营房'">
          <div class="using ">
            {{ title }}名称<em class="mr">:</em
            ><span class="grid-color">{{ item.yfName }}</span>
          </div>
          <div class="using ">
            {{ title }}环境<em class="mr">:</em
            ><span class="grid-color">{{ item.hj }}</span>
          </div>
          <div class="using ">
            {{ title }}位置<em class="mr">:</em
            ><span class="grid-color">{{ item.cityName }}</span>
          </div>
          <div class="using ">
            {{ title }}面积<em class="mr">:</em
            ><span class="grid-color">{{ item.mj }}</span>
          </div>
          <div class="using ">
            {{ title }}所属单位<em class="mr">:</em
            ><span class="grid-color">{{ item.dw }}</span>
          </div>
        </div>
        <div class="grid-text" v-else-if="title == '楼栋'">
          <div class="using ">
            {{ title }}名称<em class="mr">:</em
            ><span class="grid-color">{{ item.zlName }}</span>
          </div>
          <div class="using ">
            {{ title }}环境<em class="mr">:</em
            ><span class="grid-color">{{ item.hj }}</span>
          </div>
          <div class="using ">
            {{ title }}位置<em class="mr">:</em
            ><span class="grid-color">{{ item.cityName }}</span>
          </div>
          <div class="using ">
            {{ title }}描述信息<em class="mr">:</em
            ><span class="grid-color">{{ item.intro }}</span>
          </div>
          <div class="using ">
            {{ title }}备注<em class="mr">:</em
            ><span class="grid-color">{{ item.remark }}</span>
          </div>
        </div>
      </grid-item>
    </div>
  </div>
</template>

<script>
import GridItem from "./GridItem.vue";
export default {
  components: { GridItem },
  name: "GridBox",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    title: {
      type: String,
      default() {
        return "座落";
      }
    }
  },
  methods: {
    getID(id) {
      this.$router.push({
        path: "/detailPage/" + id
      });
    }
  }
};
</script>
<style lang="scss">
.GridBox {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.Grid-modle {
  width: 24%;
}
</style>
